<template>
  <!-- 身份管理 -->
  <base-search :title="t('keys.IdentityManagement')" :isShowSearch="1"></base-search>
  <div class="card-box">
    <div class="card_group" v-for="(item, index) in list" :key="index">
      <div class="card_item_title ">
        <span>{{ item.tenantName }}</span>
        <!-- <el-button type="danger" @click="postExitTenant(item)" link>退出该租户</el-button> -->
      </div>
      <div class="card_group_all">
        <div class="card_item" v-for="(empV, empI) in item.empVOList">
          <div class="card_item_t">
            <div class="card_item_t_l">
              <span>{{ t('keys.Employees') }}：</span>{{ empV.empName }}
            </div>
            <div class="card_item_t_r">
              <span>{{ t('keys.Department') }}：</span>
              <template v-if="empV.department && empV.department.length > 20">
                <el-tooltip effect="light" :content="empV.department" placement="bottom">
                  {{ empV.department ? '('+t('keys.Detail')+')' : '--' }}
                </el-tooltip>
              </template>
              <span v-else> {{ empV.department || '--' }}</span>
            </div>

            <div class="card_item_t_btn">
              <span class="default" v-if="empV.defaultEmpFlag">{{ t('keys.default') }}</span>
              <el-button type="info" link @click.stop="postSettingEmpDefault(empV)" v-else>
                {{ t('keys.Set_as_Default') }}
              </el-button>
            </div>
          </div>
          <div class="card_item_t">
            <div class="card_item_t_l">
              <span>{{ t('keys.phone') }}：</span>{{ empV.phone }}
            </div>
            <div class="card_item_t_r">
              <span>{{ t('keys.email') }}：</span> {{ empV.email }}
            </div>
          </div>
          <div class="card_item_b">
            <span>{{ t('keys.role') }}：</span>
            <div class="card_item_b_ul" :style="empV.isShow ? 'height:auto' : ''">
              <div class="card_item_b_li" v-for="(roleV, roleI) in empV.roleEmpList" v-if="empV.roleEmpList.length > 0">
                <span> {{ roleV.roleName }}</span>
              </div>
              <div v-else>- -</div>
            </div>
            <div class="openIcon" v-if="empV.roleEmpList.length > 3">
              <el-button type="info" link @click="empV.isShow = !empV.isShow">
                {{ !empV.isShow ? t('keys.expand') : t('keys.pick_up') }}
                <el-icon class="icon" :class="empV.isShow ? 'rotate' : ''"><ArrowDown /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getIdentityInfoApi, postSettingEmpDefaultApi, postExitTenantApi, getUserSelf } from 'api/home'
import { ERR_OK } from 'config/statusCode'
import { ElMessage, ElMessageBox } from 'element-plus'
import { setUserInfo, setTenantId } from 'utils/headerToken'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const list = ref([])
// 获取身份管理列表
const getIdentityInfo = async () => {
  const { code, data } = await getIdentityInfoApi()
  if (code === ERR_OK) {
    list.value = data || []
    list.value.forEach((item) => {
      item.empVOList.forEach((empV) => {
        empV['isShow'] = false
      })
    })
  }
}
// 退出该租户
const postExitTenant = (row) => {
  ElMessageBox.confirm(t('keys.exit_the_tenant'), t('keys.tips'), {
    confirmButtonText: t('keys.ok'),
    cancelButtonText: t('keys.cancel'),
    type: 'warning'
  })
    .then(async () => {
      const params = {}
      const { code, data } = await postExitTenantApi(params, row.tenantId, JSON.parse(localStorage.getItem('userinfo'))['userId'])
      if (code === ERR_OK) {
        ElMessage({
          type: 'success',
          message: t('keys.Successfully_exited_the_tenant')
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: t('keys.haveCanceled')
      })
    })
}
// 设置默认身份
const postSettingEmpDefault = async (row) => {
  const params = { empId: row.empId, roleId: row.roleId }
  const { code } = await postSettingEmpDefaultApi(params, JSON.parse(localStorage.getItem('userinfo'))['userId'])
  if (code === ERR_OK) {
    ElMessage({
      message: t('keys.Setting_succeeded'),
      type: 'success'
    })
    getIdentityInfo()
    setUserSelf()
  }
}

// 更新用户信息
const setUserSelf = async () => {
  const { code, data } = await getUserSelf({})
  if (code === ERR_OK) {
    setUserInfo(data)
    setTenantId(data.tenantId || '')
  }
}
onMounted(() => {
  getIdentityInfo()
})
</script>

<style lang="scss" scoped>
.card-box {
  display: flex;
  flex-wrap: wrap;
  .card_group {
    width: 100%;
    height: auto;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 24px;
    .card_item_title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 550;
      color: #333333;
      margin-left: 24px;
      margin-top: 20px;
      margin-bottom: 16px;
    }
    .card_group_all {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
    }
    .card_item {
      width: calc(100% / 3 - 28px);
      min-width: 346px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #ebebeb;
      margin-left: 24px;
      margin-bottom: 24px;
      padding-bottom: 10px;
      .card_item_t {
        margin: 16px 0 0 16px;
        display: flex;
        flex-direction: row;
        .card_item_t_l {
          width: 40%;
          font-weight: 400;
          color: #333333;
          span {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
        .card_item_t_r {
          width: 45%;
          font-weight: 400;
          color: #333333;
          overflow: hidden; //溢出隐藏
          white-space: nowrap; //禁止换行
          text-overflow: ellipsis; //...
          cursor: pointer;
          span {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
          }
        }
        .card_item_t_btn {
          margin-left: auto;
          margin-right: 10px;
          .default {
            width: 40px;
            height: 18px;
            display: inline-block;
            font-size: 12px;
            text-align: center;
            line-height: 18px;
            background: #fff0e6;
            border-radius: 2px;
            margin-left: 4px;
            border: 1px solid #ffe1cc;
            color: var(--el-color-primary) !important;
          }
          .default_btn {
          }
        }
      }
      .card_item_b {
        margin: 16px 0 0 16px;
        display: flex;
        flex-direction: row;

        span {
          font-size: 12px;
          font-weight: 400;
          color: #666666;
          height: 26px;
          line-height: 26px;
        }
        .card_item_b_ul {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-flow: wrap;
          flex: 1;
          height: 32px;
          overflow: hidden;
          .card_item_b_li {
            height: 30px;
            line-height: 30px;
            padding: 0px 12px;
            background: #fafafa;
            border-radius: 2px;
            border: 1px solid #d6d6d6;
            color: #333333;
            font-size: 12px;
            margin-left: 12px;
            margin-bottom: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .default {
              width: 40px;
              height: 18px;
              display: inline-block;
              font-size: 12px;
              text-align: center;
              line-height: 18px;
              background: #fff0e6;
              border-radius: 2px;
              margin-left: 4px;
              border: 1px solid #ffe1cc;
              color: var(--el-color-primary) !important;
            }
            .card_li_dropdown {
              width: 16px;
              height: 16px;
              margin: 0 2px 0 4px;
              cursor: pointer;
              .card_li_img {
                width: 16px;
                height: 16px;
              }
            }
          }
        }
        .openIcon {
          font-size: 14px;
          display: flex;
          align-items: flex-end;
          margin-bottom: 3px;
          margin-right: 6px;
          .icon {
            width: 20px;
            height: 20px;
            border-radius: 2px;
            color: #0077ff !important;
            &.rotate {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
}
</style>
